<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,  user-scalable=no">
    <title>膝关节评估</title>
    <style>

        #gauge_form tr td {
            border: none !important;
        }

        #gauge_form .group-div {
            border-bottom: 1px dashed #d0d0d0;
            margin: 20px 0 15px;
        }

        #gauge_form .col-sm-5, #gauge_form .col-sm-3, #gauge_form .col-sm-9{
            padding-left: 0;
        }

        #gauge_form .question-item {
            /*border: 1px #c2c2c2 solid;*/
            /*background-color: white;*/
        }

        #gauge_form input[type=range]:focus {
            outline: none; /* 去掉默认蓝色边框 */
        }

        #gauge_form input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	        -webkit-appearance: none !important;
	        margin: 0;
        }

        #gauge_form input[type="number"] {
        	-moz-appearance:textfield;
        }

        #life-table td{
            padding: 0;
            font-size: 13px;
            vertical-align: middle;
        }
    </style>

</head>
<body>
<form id="gauge_form">
    <div id="knee-assessment">
        <!--<div class="view-page hide">-->
        <!--<table border="0" cellspacing="0" cellpadding="0">-->
        <!--<tr>-->
        <!--<td align="left" width="80px"><label style="font-size: 18px">陪同者</label></td>-->
        <!--<td align="left"><label id="span_companion" style="font-weight:normal;font-size: 18px"></label></td>-->
        <!--</tr>-->
        <!--</table>-->
        <!--</div>-->

        <div class="" style="border-bottom: 1px solid #d0d0d0;">
            <label style="font-size: 16px;font-weight: bold;">评定内容</label>
        </div>

        <div class="hide" style="margin-top: 20px;">
            <table border="0" cellspacing="0" cellpadding="0" style="">
                <tr>
                    <td align="left" style="width: 100px;vertical-align: middle;"><label style="font-size: 13px">陪同者</label></td>
                    <td align="left" style="vertical-align: middle;"><input id="text_companion" name="text_companion" type="text" class="question-item form-control" style="width: 120px;"/>
                    </td>
                </tr>
            </table>
        </div>

        <div id="group-1" class="group-div row" style="">
            <div class="col-sm-3">
                <label style="font-size: 14px;font-weight: bold;">生命体征</label>
            </div>
            <div class="col-sm-9" style="font-size: 14px;">
                <table class="table" id="life-table">
                    <tr>
                        <td style="width: 30%;">体温（°C）（可选）</td>
                        <td><input name="1-1" class="question-item form-control" type="text" placeholder="" style="width: 200px;">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" height="6.5px"></td>
                    </tr>
                    <tr>
                        <td>心率（次/分）（可选）</td>
                        <td><input name="1-2" class="question-item form-control" type="text" step="1" max="200" min="0" placeholder="" style="width: 200px;">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" height="6.5px"></td>
                    </tr>
                    <tr>
                        <td>呼吸（次/分）（可选）</td>
                        <td><input name="1-3" class="question-item form-control" type="text" step="1" max="200" min="0" placeholder="" style="width: 200px;">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" height="6.5px"></td>
                    </tr>
                    <tr>
                        <td>血压（mmHg）（可选）</td>
                        <td>
                            <input name="1-4" class="question-item form-control" type="text" placeholder="" style="width: 90px;display: inline-block;">
                            <span style="width: 20px!important;">&nbsp;&#47;&nbsp;</span>
                            <input name="1-5" class="question-item form-control" type="text" placeholder="" style="width: 90px;display: inline-block;">
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="group-2" class="row group-div" style="padding-bottom: 20px;">
            <div class="col-sm-3">
                <label style="font-size: 14px;font-weight: bold;">疼痛评定*</label>
            </div>
            <div class="col-sm-9">
                <input type="number" name="2-1" value="0" class="question-item form-control" id="slider-result" readonly="true" style="width: 50px;">
                <input type="range" name="2-2" value="0" class="question-item" max="100" min="0" step="1" onchange="$('#slider-result').val($(this).val());" style="border-color: transparent;">
                <div style="font-size: 12px;">提示：无痛（0）到剧痛（100）</div>
            </div>
        </div>

        <div id="group-3" class="row group-div" style="padding-bottom: 20px;">
            <div class="col-sm-3">
                <label style="font-size: 14px;font-weight: bold;">痛强度*</label>
            </div>
            <div class="col-sm-9" style="font-size: 13px;">
                <input class="question-radio" name="3-1" value="1" type="radio">无痛
                <input class="question-radio" name="3-1" value="2" type="radio" style="margin-left: 30px;">轻度不适
                <input class="question-radio" name="3-1" value="3" type="radio" style="margin-left: 30px;">不适
                <input class="question-radio" name="3-1" value="4" type="radio" style="margin-left: 30px;">难受
                <input class="question-radio" name="3-1" value="5" type="radio" style="margin-left: 30px;">可怕的痛
                <input class="question-radio" name="3-1" value="6" type="radio" style="margin-left: 30px;">极为痛苦
            </div>
        </div>

        <div id="group-4" class="row group-div" style="">
            <div class="col-sm-3">
                <label style="font-size: 14px;font-weight: bold;">膝关节活动度测量*</label>
            </div>
            <div class="col-sm-9" style="font-size: 13px;">
                <table id="table_total_edit" class="table" style="margin-top: 0;" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <div style="">
                                <div class="row">
                                    <div class="col-sm-2" style="display: inline-block;">左侧</div>
                                    <div class="col-sm-5" style="display: inline-block;">屈曲 <input
                                            type="text"
                                            maxlength="3"
                                            name="4-1"
                                            class="question-item form-control"
                                            style="width: 80px;display: inline-block;"> 度
                                    </div>
                                    <div class="col-sm-5" style="display: inline-block;">伸展 <input
                                            type="text"
                                            maxlength="3"
                                            name="4-2"
                                            class="question-item form-control"
                                            style="width: 80px;display: inline-block;"> 度
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 6.5px;">
                                    <div class="col-sm-2"></div>
                                    <div class="col-sm-3" style="display: inline-block;">髌骨活动度</div>
                                    <div class="col-sm-2" style="display: inline-block;">
                                        <input name="4-3" class="question-radio" value="1" type="radio">正常
                                    </div>
                                    <div class="col-sm-2" style="display: inline-block;">
                                        <input name="4-3" class="question-radio" value="2" type="radio">受限
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="">
                                <div class="row">
                                    <div class="col-sm-2" style="display: inline-block;">右侧</div>
                                    <div class="col-sm-5" style="display: inline-block;">屈曲 <input
                                            type="text"
                                            maxlength="3"
                                            name="4-4"
                                            class="question-item form-control"
                                            style="width: 80px;display: inline-block;"> 度
                                    </div>
                                    <div class="col-sm-5" style="display: inline-block;">伸展 <input
                                            type="text"
                                            maxlength="3"
                                            name="4-5"
                                            class="question-item form-control"
                                            style="width: 80px;display: inline-block;"> 度
                                    </div>
                                </div>
                                <div class="row" style="margin-top: 6.5px;">
                                    <div class="col-sm-2"></div>
                                    <div class="col-sm-3" style="display: inline-block;">髌骨活动度</div>
                                    <div class="col-sm-2" style="display: inline-block;">
                                        <input name="4-6" class="question-radio" value="1" type="radio">正常
                                    </div>
                                    <div class="col-sm-2" style="display: inline-block;">
                                        <input name="4-6" class="question-radio" value="2" type="radio">受限
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div id="group-5" class="row group-div" style="">
            <div class="col-sm-3">
                <label style="font-size: 14px;font-weight: bold;">膝关节周围肌力评定*</label>
            </div>
            <div class="col-sm-9" style="font-size: 13px;">
                <table id="table_around" class="table" style="margin-top: 0;" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <div style="">
                                <div class="row">
                                    <div class="col-sm-2" style="display: inline-block;">左侧
                                    </div>

                                    <div class="col-sm-5" style="display: inline-block;">屈曲
                                        <select name="4-7" class="question-item form-control" style="width: 80px;display: inline-block;">
                                            <option value="1" selected="selected">0级</option>
                                            <option value="2">1级</option>
                                            <option value="3">2级</option>
                                            <option value="4">3级</option>
                                            <option value="5">4级</option>
                                            <option value="6">5级</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-5" style="display: inline-block;">伸展
                                        <select name="4-8" class="question-item form-control" style="width: 80px;;display: inline-block;">
                                            <option value="1" selected="selected">0级</option>
                                            <option value="2">1级</option>
                                            <option value="3">2级</option>
                                            <option value="4">3级</option>
                                            <option value="5">4级</option>
                                            <option value="6">5级</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="">
                                <div class="row">
                                    <div class="col-sm-2" style="display: inline-block;">右侧</div>

                                    <div class="col-sm-5" style="display: inline-block;">屈曲
                                        <select name="4-9" class="question-item form-control" style="width: 80px;;display: inline-block;">
                                            <option value="1" selected="selected">0级</option>
                                            <option value="2">1级</option>
                                            <option value="3">2级</option>
                                            <option value="4">3级</option>
                                            <option value="5">4级</option>
                                            <option value="6">5级</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-5" style="display: inline-block;">伸展
                                        <select name="4-10" class="question-item form-control" style="width: 80px;;display: inline-block;">
                                            <option value="1" selected="selected">0级</option>
                                            <option value="2">1级</option>
                                            <option value="3">2级</option>
                                            <option value="4">3级</option>
                                            <option value="5">4级</option>
                                            <option value="6">5级</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="edit-page" style="margin-top: 20px">
            <div class="col-sm-8 col-sm-offset-4" style="font-size: 13px;">
                <button class="btn btn-white col-sm-3" type="reset" onclick="myReset()">重置</button>
                <button class="btn btn-primary col-sm-3 col-sm-offset-1" onclick="submitGaugeResult()" type="button">提交</button>
            </div>
        </div>
    </div>
</form>
</body>

<script>
    var editPage = $(".edit-page");
    var viewPage = $(".view-page");

    var totalRatio = 0;
    var totalScore = 0;

    var totalItem = 0; // 选择题总数
    var inputItemList = {}; // 存储所有的选项和分数
    var resultScore = {}; // 计算后的栏目分数

    function setEditable(edit) {
        if (edit) {
            editPage.removeClass('hide');
            viewPage.addClass('hide');
        } else {
            viewPage.removeClass('hide');
            editPage.addClass('hide');
            $(".question-radio").prop('disabled', 'disabled');
            $(".question-item").prop('disabled', 'disabled');
            $(".question-item").prop('readonly', 'readonly');
            $("#knee-assessment input").attr('disabled', 'disabled');
        }
    }

    function setGaugeResult(result) {
        $.each(result.questions, function (idx, val) {
            var obj = $("#knee-assessment [name='" + val.key + "']");
            if (obj.prop("type") == "radio") {
                $("#knee-assessment input[type='radio'][name='" + val.key + "'][value='" + val.value + "']").prop("checked", "checked");
            } else {
                obj.val(val.value);
            }
        });
    }

    function getGaugeResult() {
        var result = {questions:[]};
        var items = $("#knee-assessment .question-item");
        var radios = $("#knee-assessment input[type='radio']:checked");

        for (var i = 0; i < items.length; i++) {
            if(!checkSpecifyItem(items[i])) {
            	return null;
            }
            
            var res = {};
            res.key = $(items[i]).attr("name");
            res.value = $(items[i]).val();
            result.questions.push(res);
        }

        if (radios.length < 3) {
            utils.msgError("请完成所有问题");
            return null;
        }

        for (var j = 0; j < radios.length; j++) {
            var res = {};
            res.key = $(radios[j]).attr("name");
            res.value = $("#knee-assessment input[name='" + res.key + "']:checked").val();
            result.questions.push(res);
        }
        return result;
    }
    
    /**
     * 判断字符串是否为blank
     * @param string
     * @return boolean
     */
    var isBlank = function(str){
    	str = str||'';
      	return '' == str.replace(/(^s*)|(s*$)/g, "").trim();
    }
    
    /**
     * 每个选择题变化时触发校验
     */
    var listenChangeItem = function(){
        $('#knee-assessment input').blur(function(){
        	checkSpecifyItem(this);
        });
    }
    
    // listenChangeItem();
    
    /**
     * 检查用户的输入项, 用户自定义检查方法
     */
    var checkSpecifyItem = function(that){
     	var key = $(that).attr("name");
     	var item = checkItems[key];
     	if(item == undefined) {
     		return checkItems["general"](that);
     	} else if(item.required){
     		return item.handler(that);
     	}
     	return true;
    }
    
    /**
     * 每个选项的校验规则， 如果没有定义，就按通用的校验规则来
     */
    var checkItems = {
    	"text_companion":{"required": true, "handler": function(that){
    		// 陪同者姓名非必填
    		var companion = $("#text_companion").val(); 
	     	if (!isBlank(companion) && companion.length > 10) {
	     		utils.msgError("陪同者名称长度限制在10以内!");
	     		$("#text_companion").focus();
	     		return false;
	     	}
         	return true;
    	}},
    	"1-1":{"required": true, "handler": function(that){ // 检查体温
    		// 体温非必填
    		var textTemperature = $(that);
    		if (textTemperature.val() == null || textTemperature.val().trim() == '') {
                // utils.msgError("请填写体温!");
                // textTemperature.focus();
                return true;
            }
    		if (isNaN(textTemperature.val())) {
                utils.msgError("体温必须为数字!");
                textTemperature.focus();
                return false;
            }
    		
    		if (parseFloat(textTemperature.val()) > 50 || parseFloat(textTemperature.val()) < 20) {
                utils.msgError("体温在20~50度之间!");
                textTemperature.focus();
                return false;
            }
           	return true;
    	}},
    	"1-2":{"required": true, "handler": function(that){
    		// 心跳非必填
    		var textHeartRate = $(that);
    		if (textHeartRate.val() == null || textHeartRate.val().trim() == '') {
                // utils.msgError("请填写心率!");
                // textHeartRate.focus();
                return true;
            }
            if (isNaN(textHeartRate.val()) || parseInt(textHeartRate.val()) != textHeartRate.val()) {
                utils.msgError("心率必须为整数!");
                textHeartRate.focus();
                return false;
            }
            if (parseInt(textHeartRate.val()) > 999 || parseInt(textHeartRate.val()) < 0) {
                utils.msgError("心率在0~999之间!");
                textHeartRate.focus();
                return false;
            }
      		return true;
      	}},
      	"1-3":{"required": true, "handler": function(that){
    		// 呼吸非必填项
    		var textBreathingRate = $(that);
    		if (textBreathingRate.val() == null || textBreathingRate.val().trim() == '') {
                // utils.msgError("请填写呼吸!");
                // textBreathingRate.focus();
                return true;
            }
            if (isNaN(textBreathingRate.val()) || parseInt(textBreathingRate.val()) != textBreathingRate.val()) {
                utils.msgError("呼吸必须为整数!");
                textBreathingRate.focus();
                return false;
            }
            if (parseInt(textBreathingRate.val()) > 999 || parseInt(textBreathingRate.val()) < 0) {
                utils.msgError("呼吸在0~999之间!");
                textBreathingRate.focus();
                return false;
            }
      		return true;
      	}},
      	"1-4":{"required": true, "handler": function(that){
    		// 血压非必填项
    		var htextSystolicPressure = $(that);
    		var ltextSystolicPressure = $("#knee-assessment input[name='1-5']");
    		
    		// 舒张压力没填写
    		if (htextSystolicPressure.val() == null || htextSystolicPressure.val().trim() == '') {
    			if (ltextSystolicPressure.val()!= null && ltextSystolicPressure.val().trim() != '') {
    				utils.msgError("舒张/收缩请成对填写或不填");
    				// htextSystolicPressure.focus();
                    return false;
    			}
                return true;
            }
    		
    		// 舒张已填写
    		if (isNaN(htextSystolicPressure.val()) || parseInt(htextSystolicPressure.val()) != htextSystolicPressure.val()) {
                utils.msgError("值必须为整数!");
                htextSystolicPressure.focus();
                return false;
            }
            if (parseInt(htextSystolicPressure.val()) > 999 || parseInt(htextSystolicPressure.val()) < 0) {
                utils.msgError("舒张压力在0~999之间!");
                htextSystolicPressure.focus();
                return false;
            }
            
            if(ltextSystolicPressure.val() != null && ltextSystolicPressure.val() != '') {
            	if (parseInt(htextSystolicPressure.val()) < parseInt(ltextSystolicPressure.val())) {
	            	utils.msgError("舒张压力需要比收缩压力大!");
	                htextSystolicPressure.focus();
	                return false;
            	}
            }
      		return true;
      	}},
      	"1-5":{"required": true, "handler": function(that){
    		// 血压非必填项
    		var ltextSystolicPressure = $(that);
    		var htextSystolicPressure = $("#knee-assessment input[name='1-4']");
    		
    		// 收缩压力没填写
    		if (ltextSystolicPressure.val() == null || ltextSystolicPressure.val().trim() == '') {
    			if (htextSystolicPressure.val()!= null && htextSystolicPressure.val().trim() != '') {
    				utils.msgError("舒张/收缩请成对填写或不填");
    				// ltextSystolicPressure.focus();
                    return false;
    			}
                return true;
            }
    		
    		// 收缩已填写
    		if (isNaN(ltextSystolicPressure.val()) || parseInt(ltextSystolicPressure.val()) != ltextSystolicPressure.val()) {
                utils.msgError("值必须为整数!");
                ltextSystolicPressure.focus();
                return false;
            }
            if (parseInt(ltextSystolicPressure.val()) > 999 || parseInt(ltextSystolicPressure.val()) < 0) {
                utils.msgError("收缩压力在0~999之间!");
                ltextSystolicPressure.focus();
                return false;
            }
            
            if(htextSystolicPressure.val() != null && htextSystolicPressure.val() != '') {
            	if (parseInt(htextSystolicPressure.val()) < parseInt(ltextSystolicPressure.val())) {
	            	utils.msgError("收缩压力需要比舒张压力小!");
	            	ltextSystolicPressure.focus();
	                return false;
            	}
            }
      		return true;
      	}},
      	"3-1":{"required": true, "handler": function(that){
    		// 痛强度必填项
    		var checked = $("#knee-assessment input[name='3-1']").is(":checked");
    		if (!checked) {
    			utils.msgError("请选择疼痛强度");
    			$(that).focus();
    			$(that).attr("checked", "checked");
                return false;
            }
      		return true;
      	}},
      	"4-1":{"required": true, "handler": function(that){
    		// 屈曲度必填项
    		var flexion = $(that);
    		if (flexion.val() == null || flexion.val().trim() == '') {
    			utils.msgError("请填写左侧屈曲度");
    			flexion.focus();
                return false;
            }
    		if (isNaN(flexion.val()) || parseInt(flexion.val()) != flexion.val()) {
                utils.msgError("值必须为整数!");
                flexion.focus();
                return false;
            }
    		if (flexion.val() < 0 || parseInt(flexion.val()) > 999) {
                utils.msgError("屈曲度范围在0-999度之间");
                flexion.focus();
                return false;
            }
      		return true;
      	}},
      	"4-4":{"required": true, "handler": function(that){
    		// 屈曲度必填项
    		var flexion = $(that);
    		if (flexion.val() == null || flexion.val().trim() == '') {
    			utils.msgError("请填写右侧屈曲度");
    			flexion.focus();
                return false;
            }
    		if (isNaN(flexion.val()) || parseInt(flexion.val()) != flexion.val()) {
                utils.msgError("值必须为整数!");
                flexion.focus();
                return false;
            }
    		if (flexion.val() < 0 || parseInt(flexion.val()) > 999) {
                utils.msgError("屈曲度范围在0-999度之间");
                flexion.focus();
                return false;
            }
      		return true;
      	}},
      	"4-2":{"required": true, "handler": function(that){
    		// 伸展度必填项
    		var stretch = $(that);
    		if (stretch.val() == null || stretch.val().trim() == '') {
    			utils.msgError("请填写左侧伸展度");
    			stretch.focus();
                return false;
            }
    		if (isNaN(stretch.val()) || parseInt(stretch.val()) != stretch.val()) {
                utils.msgError("值必须为整数!");
                stretch.focus();
                return false;
            }
    		if (stretch.val() < 0 || parseInt(stretch.val()) > 999) {
                utils.msgError("伸展度范围在0-999度之间");
                stretch.focus();
                return false;
            }
      		return true;
      	}},
      	"4-5":{"required": true, "handler": function(that){
    		// 伸展度必填项
    		var stretch = $(that);
    		if (stretch.val() == null || stretch.val().trim() == '') {
    			utils.msgError("请填写右侧伸展度");
    			stretch.focus();
                return false;
            }
    		if (isNaN(stretch.val()) || parseInt(stretch.val()) != stretch.val()) {
                utils.msgError("值必须为整数!");
                stretch.focus();
                return false;
            }
    		if (stretch.val() < 0 || parseInt(stretch.val()) > 999) {
                utils.msgError("伸展度范围在0-999度之间");
                stretch.focus();
                return false;
            }
      		return true;
      	}},
      	"4-3":{"required": true, "handler": function(that){
    		// 左侧髌骨活动度必填
    		var checked = $("#knee-assessment input[name='4-3']").is(":checked");
    		if (!checked) {
    			utils.msgError("请选择左侧髌骨活动度");
    			$(that).focus();
    			$(that).attr("checked", "checked");
                return false;
            }
      		return true;
      	}},
      	"4-6":{"required": true, "handler": function(that){
    		// 右侧髌骨活动度必填
    		var checked = $("#knee-assessment input[name='4-6']").is(":checked");
    		if (!checked) {
    			utils.msgError("请选择右侧髌骨活动度");
    			$(that).focus();
    			$(that).attr("checked", "checked");
                return false;
            }
      		return true;
      	}},
      	"general": function(that){
      		if(typeof(that) == "undefined" || that == null || $(that).val() == "null" || $(that).val() == ""){
      			debugger; 
      			utils.msgError("请完成所有问题");
      	   		return false;
      		}
      		return true;
      	}
    };

</script>
</html>